<template>
    <CommonDialog :visible="visible" width="480px" @on-close="cancel" title="添加内容">
        <ul class="content-type">
            <li v-for="item in toolList" :key="item.type" @click="checkType(item)" :class="item.type"> 
                {{item.name}}
            </li>
        </ul>
    </CommonDialog>
</template>

<script setup>
import CommonDialog from '@/components/common-dialog.vue'
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();

const route = useRoute();

const emit = defineEmits(['update:modelValue', 'update-folder', 'add-content']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});

const toolList = [
    {
        name: '音视频',
        type: 'video',
    },
    {
        name: '文档',
        type: 'text',
    }
]

const visible = computed({
    get: () => props.modelValue,
    set: val => {
        emit('update:modelValue', val);
    }
})


function cancel () {
    emit('update:modelValue', false);
}

function checkType(item) {
    cancel();
    emit('add-content', props.form, item);
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.content-type {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 25px 45px;
    margin-top: -10px;
    li {
        width: 180px;
        height: 60px;
        margin-right: 30px;
        line-height: 60px;
        cursor: pointer;
        border-radius: 4px;
        padding: 0px 30px;
        font-size: 16px;
        color: var(--srt-main-text-color);
        &:hover {
            background: #F7F9FA;
            color: var(--srt-main-active-text-color);
        }
        &:nth-child(2n) {
            margin-right: 0px;
        }
        &.video {
            &::before {
                content: '';
                background: url(~@/assets/img/doc-type/video@2x.png) no-repeat;
                width: 36px;
                height: 36px;
                background-size: contain;
                display: inline-block;
                margin-right: 10px;
                vertical-align: middle;
                transform: translateY(-1px);
            }
        }
         &.text {
            &::before {
                content: '';
                background: url(~@/assets/img/doc-type/doc@2x.png) no-repeat;
                width: 36px;
                height: 36px;
                background-size: contain;
                display: inline-block;
                margin-right: 10px;
                vertical-align: middle;
                transform: translateY(-1px);
            }
        }
    }
    

}
</style>